<template>
  <div class="container">
    <div ref="chart_ref" class="chart"></div>
  </div>
</template>

<script>
export default {
  name:"SenChart",
  data() {
    return {
      areaName: ["赣江上游", "赣江中游", "赣江下游", "全流域"],
      SenName: ["显著减少", "不显著减少", "不显著增加", "显著增加"],
      upSenData: [0.08139, 0.3686, 0.20896, 0.34105],
      middleSenData: [0.07913, 0.32525, 0.20382, 0.3918],
      downSenData: [0.04529, 0.13631, 0.2746, 0.5438],
      allSenData: [0.07214, 0.30066, 0.22334, 0.40386],
      chart: null,
    };
  },
  mounted() {
    this.SenChartInit()
    //当窗体的尺寸发生改变时，图表大小也随之改变
    window.addEventListener("resize", this.screenAdapter);
  },
  beforeDestroy() {
    //  销毁图表实例
      if(this.chart){
        this.chart.dispose()
        this.chart=null
      }
    //组件销毁时移除事件
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //雷达图
    SenChartInit() {
      //初始化图表
      this.chart = this.$echarts.init(this.$refs.chart_ref, "dark");
      const op = {
        backgroundColor: "rgba(0, 0, 0, 0)",
        color: ["#FF6B6B", "#4ECDC4", "#FFBE0B", "#8338EC", "#3A86FF"],
        // title: {
        //   text: "近20年变化特征",
        //   top: "1%",
        //   left: "center",
        // },
        tooltip: {
          //触发条件，鼠标移入坐标轴
          trigger: "item",
          //高亮类型
          axisPointer: {
            //线条
            type: "line",
            z: 0,
            lineStyle: {
              type: "solid",
              color: "#2D3443",
            },
          },
          backgroundColor: "rgba(16,12,42,0.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: this.areaName,
          bottom: "2%",
          itemGap: 10,
        },
        radar: [
          {
            indicator: [
              { name: "显著减少", max: 0.6 },
              { name: "不显著减少", max: 0.6 },
              { name: "不显著增加", max: 0.6 },
              { name: "显著增加", max: 0.6 },
            ],
            radius: "75%",
            center: ["50%", "50%"],
            startAngle: 135,
            name: {
              textStyle: {
                color: "#1883ff",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: true,
              symbol: "arrow",
              symbolSize: [5, 7.5],
              lineStyle: {
                color: "#1883ff",
                type: "dashed",
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "radar",
            areaStyle: {},
            symbol: "none",
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                },
              },
            },
            lineStyle: {
              opacity: 0,
            },
            data: [
              {
                value: this.upSenData,
                name: "赣江上游",
              },
              {
                value: this.middleSenData,
                name: "赣江中游",
              },
              {
                value: this.downSenData,
                name: "赣江下游",
              },
              {
                value: this.allSenData,
                name: "全流域",
              },
            ],
          },
        ],
      };
      this.chart.setOption(op);
    },
  },
};
</script>
<style>
.container {
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>